<template>
  <div class="">
    <h1>这是全部子组件</h1>

    <van-row>
      <van-col span="4"
        >全选：<input type="checkbox" v-model="checked" @change="checkall"
      /></van-col>
      <van-col span="4" offset="16"
        ><span @click="removeall">选中删除</span></van-col
      >
    </van-row>
    <van-card
      v-for="item in $store.state.list"
      :key="item.id"
      :price="item.price"
      :desc="item.subscribe"
      :title="item.name"
    >
      <template #footer>
        <input type="checkbox" v-model="result" :value="item" @change="check" />
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: [],
      checked: false,
    };
  },
  mounted() {},
  methods: {
    checkall() {
      if (this.checked == true) {
        this.result = this.$store.state.list;
      } else {
        this.result = [];
      }
    },
    check() {
      if (this.result.length == this.$store.state.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    removeall() {
      this.$store.commit("removeall", this.result);
      this.checked = false;
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
